@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('user.layouts.navbar')
        @include('user.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">充值</li>
                            </ol>
                        </nav>

                        <div class="card">
                            <div class="card-body">

                                <div class="col-lg-7">

                                    <form action='{{ route('pay.store') }}' method="post" target="_blank">
                                        @csrf

                                        @if(count($errors)>0)
                                            @foreach($errors->all() as $error)
                                                <input type="hidden" id="error" value="{{ $error }}">
                                            @endforeach
                                        @endif

                                        <div class="mb-3">
                                            <input type="hidden" id="pay_type" name="pay_type" value="alipay">
                                            <button type="button" class="btn btn-outline-primary mr-2 mb-2 j-pay_type active" value="alipay">
                                                <i class="fa fa-paypal fa-2x"></i>{{ __(' 支付宝') }}
                                            </button>
                                            <button type="button" class="btn btn-outline-success mr-2 mb-2 j-pay_type" value="wechat">
                                                <i class="fa fa-weixin fa-2x"></i>{{ __(' 微信') }}
                                            </button>
                                        </div>

                                        <hr>

                                        <div class="form-group"><label>{{ __('充值金额：') }}</label>

                                            <div class="mb-3">
                                                <button type="button" class="btn btn-outline-secondary mr-2 mb-2 j-pay_money" value="10">
                                                    {{ __('¥ 10.00') }}
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary mr-2 mb-2 j-pay_money" value="30">
                                                    {{ __('¥ 30.00') }}
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary mr-2 mb-2 j-pay_money" value="50">
                                                    {{ __('¥ 50.00') }}
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary mr-2 mb-2 j-pay_money" value="100">
                                                    {{ __('¥ 100.00') }}
                                                </button>
                                            </div>

                                            <input type="text" class="form-control" id="money" name="money" maxlength="10" placeholder="输入充值金额" required="required" onkeyup="alterMoney()">

                                        </div>

                                        <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#payModalCenter">{{ __('提交') }} </button>
                                    </form>

                                </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->

                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script>

        // 获取错误提示
        if ($('#error').val()) {
            toast($('#error').val());
        }

        // 充值类型选中
        $('.j-pay_type').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
            $('#pay_type').val($(this).val())
        });

        // 充值金额选中
        $('.j-pay_money').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
            $('#money').val($(this).val());
        });

        function alterMoney() {
            if ($('#money').val() < 1) {
                toast('充值金额不能小于1');
                $('#money').val(1);     //设置金额
            }
            //清除按钮选中
            $('.j-pay_money').removeClass('active');
        }

    </script>
    </body>
    </html>
@endsection